<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :class="getClassAndStyle(props.height).class"
    :style="getClassAndStyle(props.height).style"
    :navigation="navigation as undefined"
    :pagination="{ type: 'fraction', el: '.pagination' } as undefined"
  >
    <swiper-slide v-for="item in items" :key="item.image">
      <slot :item="item">
        <div class="bg-image" :style="{ backgroundImage: `url(${item.image})` }">
          <Container class="h-full">
            <div class="flex flex-col justify-center items-start lt-sm:px-4">
              <p class="text-4xl font-bold text-white">{{ item.title }}</p>
              <p class="text-xl text-gray-100 pt-4">{{ item.subTitle }}</p>
            </div>
          </Container>
        </div>
      </slot>
    </swiper-slide>
    <div
      class="flex items-center justify-center absolute right-0 bottom-0 bg-white opacity-60 text-dark-300 w-40 h-16 z-30"
    >
      <div class="pagination font-bold mr-4 w-unset!"></div>
      <div class="prev i-mdi-arrow-left-thin" style="font-size: 2rem"></div>
      <div class="next i-mdi-arrow-right-thin" style="font-size: 2rem"></div>
    </div>
  </swiper>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import type { Swiper as SwiperType } from 'swiper'
import { SwiperItemType } from './types.d'
import { SwiperEvents } from 'swiper/types'

const props = defineProps({
  height: {
    type: String,
    default: 'h-80'
  },
  items: {
    type: Array as PropType<Array<SwiperItemType>>,
    default: () => []
  }
})

const emits = defineEmits(['change'])
function getClassAndStyle(str: string) {
  // props.height
  // 如果 height 的值包含 rem em px 则返回 {string: str, class: ''}
  // 如果 height 的值包含 h-,则返回 {string: '', class: str}
  return {
    style: /(rem|em|px)/.test(props.height) ? { height: str } : {},
    class: /h-/.test(props.height) ? str : ''
  }
}
const onSwiper = (swiper: SwiperType) => {
  // console.log(swiper)
}
const onSlideChange = (e) => {
  emits('change', e)
}

const modules = [Navigation, Pagination]

const navigation = {
  prevEl: '.prev',
  nextEl: '.next'
}
</script>

<style scoped lang="scss">
.swiper-button-disabled {
  color: rgba(0, 0, 0, 0.3);
}
</style>
